<template>
  <div class="word-cloud-01 chart" ref="wordCloud01"></div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
const wordCloud01 = ref(null);
const echarts = inject('$echarts');
import 'echarts-wordcloud'

// 参数
let seriesData = [
  {
    name: "Jayfee",
    value: 666,
  },
  {
    name: "Nancy",
    value: 520,
  },
  {
    name: "生活资源",
    value: "999",
  },
  {
    name: "供热管理",
    value: "888",
  },
  {
    name: "供气质量",
    value: "777",
  },
  {
    name: "生活用水管理",
    value: "688",
  },
  {
    name: "一次供水问题",
    value: "588",
  },
  {
    name: "交通运输",
    value: "516",
  },
  {
    name: "城市交通",
    value: "515",
  },
  {
    name: "环境保护",
    value: "483",
  },
  {
    name: "房地产管理",
    value: "462",
  },
  {
    name: "城乡建设",
    value: "449",
  },
  {
    name: "社会保障与福利",
    value: "429",
  },
  {
    name: "社会保障",
    value: "407",
  },
  {
    name: "文体与教育管理",
    value: "406",
  },
  {
    name: "公共安全",
    value: "406",
  },
  {
    name: "公交运输管理",
    value: "386",
  },
  {
    name: "出租车运营管理",
    value: "385",
  },
  {
    name: "供热管理",
    value: "375",
  },
  {
    name: "市容环卫",
    value: "355",
  },
  {
    name: "自然资源管理",
    value: "355",
  },
  {
    name: "粉尘污染",
    value: "335",
  },
  {
    name: "噪声污染",
    value: "324",
  },
];

const option = {
  compCode: "C202309038",
  backgroundColor: "#131f56",
  tooltip: {
    show: true,
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
  },
  series: [
    {
      name: "热点分析",
      type: "wordCloud",
      // size: ['9%', '99%'],
      // sizeRange: [6, 66],//最小文字——最大文字
      // textRotation: [0, 45, 90, -45],
      // rotationRange: [-45, 90],//旋转角度区间
      // rotationStep: 90,//旋转角度间隔
      // shape: 'circle',
      // gridSize: 10,//字符间距
      textPadding: 0,
      autoSize: {
        enable: true,
        minSize: 6,
      },
      textStyle: {
        normal: {
          color: function () {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 105) + 150,
                Math.round(Math.random() * 105) + 150,
                Math.round(Math.random() * 105) + 150,
              ].join(",") +
              ")"
            );
          },
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: "#333",
        },
      },
      data: [],
    },
  ],
};
option.series[0].data = seriesData;


onMounted(() => {
  const chart = echarts.init(wordCloud01.value);
  chart.setOption(option);
});
</script>